<template>
  <n-flex
    class="variation-nav"
    justify="space-between"
    align="center"
  >
    <n-flex class="variation-nav__text" align="center">
      <span>本月汇总</span>
      <span>支出: 20.21</span>
      <span>收入: 19.21</span>
    </n-flex>
    <n-flex>
      <n-button
        size="small"
        type="primary"
        >添加消费</n-button
      >
    </n-flex>
  </n-flex>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss">
  .variation-nav {
    height: 48px;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 0 $space-lg;
    border-bottom: 1px solid $border-color;
    &__text {
      color: $minor-color;
      font-size: 12px;
      span {
        &:nth-child(1) {
          color: #000;
          font-weight: bold;
          font-size: 14px;
        }
      }
    }
  }
</style>
